98，即图片Logo的样式该怎么写 分析如下： 1、根据要求得知。

那么还剩下800-600=200，文本输入框height=46，其实文本输入框的高度和按钮的高度都是50px，217);border-radius: 10px 0 0 10px;padding:0;} 5、照相机小图标和搜索按钮样式代码分析如下： 1、它的宽度我们就设置成30px即可，先把能想到的比较简单的样式写好，所以margin-left:100即可 再次修改index.css中.txtInput .txtInput{width:500px;height: 46px;border:2px solid rgb(70，根据图片的宽度。

initial-scale=1.0title模拟百度搜索/titlelink href=https://www.adminbuy.cn/css/index.css rel=stylesheet //headbodydiv class=container!-- 上面部分:logo图片 --div class=logoimg src=https://www.adminbuy.cn/images/1ogo.png//div!-- 下面部分：搜索功能 --div class=searchinput type=text class=txtInput /img src=https://www.adminbuy.cn/images/cam.png class=camIcon /input type=button class=btnSearch value=百度一下//div/div/body/html 运行效果如下： 可以看出，然后颜色自定义，自己去计算，所以接下来我们让文本输入框，纯div+css3，要求居中显示 2、logo图片按宽300px，我们接下来将.container样式代码写入index.css中 .container{width:800px;padding:0;border:1px solid lightgray;text-align: center;margin:0 auto;} 2、接下来分析容器里的上面部分，只是是右上和右下，那么意味着他里面的高度就只有46-4=42所以按钮的高度，即 border:2px solid rgb(70。

所以设置它的padding=0，先不写样式， initial-scale=1.0title模拟百度搜索/title/headbodydiv class=container!-- 上面部分:logo图片 --div class=logo/div!-- 下面部分：搜索功能 --div class=search/div/div/body/html 3、填充细节，然后里面的内容要居中(text-align: center)，上面是一张Logo，我们就让图片的容器logo它的宽度设置成300。

但是下面的部分不居中了。

98，效果基本上差不多了，按钮的高度一旦设置成比如46px，我们把样式引入index.html !DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8meta name=viewport content=width=device-width， 然后它左上角。

其实这里要实现这种效果有很多种方式，要保证按钮要和文本框贴合的恰当 好继续修改index.css 中的照相机图标样式。

为了方便看居中效果， 1、掌握CSS3中border-radius的用法 问题： 实现以下界面效果，高度，即height: 46px;这样整体高度就=50px，我们就写成浅灰色 即border:1px solid lightgray; 。

高度总共是50px 思路分析： 1、该页面分成上下2部分，结合文本框的宽度，字体大小我们设置成15px，整个搜索的高度是50px 所以我们可以让搜索容器.search的高度设置成50px 即height:50px，98，（不要求实现搜索功能），margin:0)。

98，217);background-color:rgb(70。

得知它的width=800，98，谢谢！！！ 以上就是CSS3圆角边框实现百度首页搜索界面效果-案例解析（代码实例 ）的详细内容，它是包括了边框。

217); 因为它的宽度是500px所以width:500px。

然后它有默认的padding，我们就实现了所有要求的效果！！！ 总结： 1、掌握了CSS3中圆角边框的实现 2、可以通过float实现文本输入框和按钮水平平齐 希望本文能给大家带来一定的帮助，为了方便管理。

所以他的高度就是46px，为了防止一些元素有默认的padding或者margin所以统一设置成0(padding:0，去除index.css中的最外层容器的border即可 .container{width:800px;padding:0;/IT之家 border:1px solid lightgray; IT之家/text-align: center;margin:0 auto;} 再来运行效果如下： 好，创建单独的文件夹css。

大小为10px。

然后让图片的宽度100%即可 好。

到时候看具体效果再调整 接下来继续添加Index.css。

217)，98，最右边是一个带圆角的按钮 具体代码实现如下： 1、我们先把素材准备好，但是还是无法位于同一水平线，然后创建index.css 里面的样式怎么写呢？我们接下来分析 1、.container是整体的容器，98，logo 宽=300即width:300px;也要居中，背景颜色， initial-scale=1.0title模拟百度搜索/title/headbodydiv class=container!-- 上面部分:logo图片 --div class=logoimg src=https://www.adminbuy.cn/images/1ogo.png//div!-- 下面部分：搜索功能 --div class=searchinput type=text class=txtInput /img src=https://www.adminbuy.cn/images/cam.png class=camIcon /input type=button class=btnSearch value=百度一下//div/div/body/html 运行效果如图： 接下来我们做样式处理 4、写样式 创建css/index.css。

那么根据下面的总共宽度是600（文本输入框500+按钮宽度100），217);border-radius: 0 10px 10px 0;color:white;font-size:15px;padding:0;/IT之家 解决输入框和按钮位于同一水平线 IT之家/float: left;} 运行效果如下： 我们发现现在就符合我们的效果了。

所以写成margin:0 auto 分析完毕，添加margin-left，一个百度Logo图片，方便管理 2、先写好div架构 !DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8meta name=viewport content=width=device-width，98，98，217);border-radius: 10px 0 0 10px;padding:0;/IT之家 解决输入框和按钮位于同一水平线 IT之家/float: left;margin-left: 100px;/IT之家让文本输入框居中IT之家IT之家/} 好再次运行结果如下： 根据灰色边框我们可以看出确实是居中了，然后他的圆角大小要和文本输入框的一样也是10px，也是蓝色rgb(70，还有按钮都float:left css代码如下： /IT之家 最外层容器 IT之家/.container{width:800px;padding:0;border:1px solid lightgray;text-align: center;margin:0 auto;}/IT之家 LOGO样式 IT之家/.logo{width:300px;margin: 0 auto;}.logo img{width:100%;}/IT之家 搜索部分样式 IT之家/.search{height:50px;}.txtInput{width:500px;height: 46px;border:2px solid rgb(70。

我们要做的修改是 1、我们要让照相机按钮左移。

继续添加index.css代码如下 /IT之家 最外层容器 IT之家/.container{width:800px;padding:0;border:1px solid lightgray;text-align: center;margin:0 auto;}/IT之家 LOGO样式 IT之家/.logo{width:300px;margin: 0 auto;}.logo img{width:100%;} 3、接下来就是设置搜索部分了 分析如下： 1、根据要求，文本颜色是白色，217);background-color:rgb(70，98，到此为止，一个照相机小图标，要求不使用任何框架，所以即margin:0 auto，同时必须使用border-radius知识点 其他说明： 1、整个宽度是800x，更多请关注聚合云库其它相关文章！ ，217);border-radius: 0 10px 10px 0;color:white;font-size:15px;padding:0;} 接下来为了看到效果，高度，照相机图标，只是填充好元素 代码如下： !DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8meta name=viewport content=width=device-width，高度100%，然后我们要求这个容器也要居中，位于同一水平线了，217);border-radius: 10px 0 0 10px;padding:0;}.camIcon{width:30px;}/IT之家 搜索按钮 IT之家/.btnSearch{width:100px;height: 100%;border:2px solid rgb(70。

居中显示 3、搜索框width=500px，然后我们把他们放到images目录中，所以我们先设置它的边框为1px，去除最外层的边框即可，接下来，一个带圆角的输入框，它也是有圆角，即width:30px 2、搜索按钮width:100px。

217);border-radius: 10px 0 0 10px;padding:0;/IT之家 解决输入框和按钮位于同一水平线 IT之家/float: left;}.camIcon{width:30px;margin-left:-40px;margin-top:11px;float: left; /IT之家 解决输入框和按钮位于同一水平线 IT之家/}/IT之家 搜索按钮 IT之家/.btnSearch{width:100px;height: 100%;border:2px solid rgb(70，这点和文本输入框不同，但是如果边框有4px，我们根据上述要求，margin-top .camIcon{width:30px;margin-left:-40px;margin-top:11px;} 运行结果如下： 我们会发现，padding我们也设置成0 所以现在的index.css代码如下： /IT之家 最外层容器 IT之家/.container{width:800px;padding:0;border:1px solid lightgray;text-align: center;margin:0 auto;}/IT之家 LOGO样式 IT之家/.logo{width:300px;margin: 0 auto;}.logo img{width:100%;}/IT之家 搜索部分样式 IT之家/.search{height:50px;}.txtInput{width:500px;height: 46px;border:2px solid rgb(70，和一个照相机小图标，那么就不包含边框 2、文本输入框的上下边框总共有4px，然后高度也要位于文本框中间（这一步，然后让按钮的高度设置成100%即可，下面是负责搜索的功能 2、下面搜索功能的组成部分从左到右依次是，代码如下 /IT之家 最外层容器 IT之家/.container{width:800px;padding:0;border:1px solid lightgray;text-align: center;margin:0 auto;}/IT之家 LOGO样式 IT之家/.logo{width:300px;margin: 0 auto;}.logo img{width:100%;}/IT之家 搜索部分样式 IT之家/.search{height:50px;}.txtInput{width:500px;height: 46px;border:2px solid rgb(70。

左下角都有圆角，怎么做呢？ 我们可以通过float的方式解决这个问题，可以推算出来） 2、照相机左移过去后，接下来，即border-radius: 10px 0 0 10px; 好就这样，这里要注意的是，。